<template>
  <view class="viewport">
    <view class="logo">
      <image
        src="https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/logo_icon.png"
        mode="scaleToFill"
      />
    </view>

    <view class="login">
      <button
        class="button phone"
        open-type="getPhoneNumber"
        @getphonenumber="getPhoneNumber"
      >
        <text class="icon icon-phone"></text>
        手机号快捷登录
      </button>

      <view class="extra">
        <view class="caption">
          <text>其他登录方式</text>
        </view>
        <view class="options">
          <button @tap="mockLogin">
            <text class="icon icon-phone"
              >模拟快捷登录</text
            >
          </button>
        </view>
      </view>

      <view class="tips"
        >登录/注册即视为你同意《服务条款》</view
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import {
  wxLoginHttp,
  wxLoginSimpleHttp,
} from '@/services/loginService'
import { useMemberStore } from '@/stores'
import type { LoginResType } from '@/types/login'
import { onLoad } from '@dcloudio/uni-app'

const store = useMemberStore()
// 获取code 登录凭证。
let code = ''
onLoad(async () => {
  const res = await wx.login()
  console.log('wx.login-res:', res)
  code = res.code
})

// 获取手机号码（企业认证的才可以，非个人的）
const getPhoneNumber: UniHelper.ButtonOnGetphonenumber =
  async (ev) => {
    console.log('获取手机号码ev：', ev)

    const encryptedData =
      ev.detail!.encryptedData!
    const iv = ev.detail!.iv!

    let res = await wxLoginHttp({
      code,
      encryptedData,
      iv,
    })

    console.log('登录res：', res)
    loginSuccess(res.result)
  }

// 模拟手机号码快捷登录（开发练习）
const mockLogin = async () => {
  // 13123456789   16666666666
  let res = await wxLoginSimpleHttp('16666666666')
  console.log('模拟登录res：', res)

  loginSuccess(res.result)
}
const loginSuccess = (profile: LoginResType) => {
  uni.showToast({
    icon: 'success',
    title: '登录成功',
  })

  store.setProfile(profile)
  // uni.navigateTo({
  //   url:'/pages/user/index'
  // })
  setTimeout(() => {
    // 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面.所以toast就没有看到提示。
    // uni.switchTab({
    //   url: '/pages/user/index',
    // })
    uni.navigateBack()
  }, 300)
}
</script>

<style lang="scss">
.viewport {
  display: flex;
  flex-direction: column;

  .logo {
    flex: 1;
    text-align: center;
    image {
      width: 220rpx;
      height: 220rpx;
      margin-top: 15vh;
    }
  }

  .login {
    height: 60vh;
    padding: 40rpx 20rpx 20rpx;

    display: flex;
    flex-direction: column;

    .extra {
      flex: 1;
      padding: 70rpx 70rpx 0;

      .caption {
        width: 440rpx;
        line-height: 1;
        border-top: 1rpx solid #ddd;
        font-size: 26rpx;
        color: #999;
        position: relative;
        text {
          transform: translate(-40%);
          background-color: #fff;
          position: absolute;
          top: -12rpx;
          left: 50%;
        }
      }

      .options {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 70rpx;
        button {
          padding: 0;
          background-color: transparent;
          &::after {
            border: none;
          }
        }
      }

      .icon {
        font-size: 24rpx;
        color: #444;
        display: flex;
        flex-direction: column;
        align-items: center;

        &::before {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 6rpx;
          font-size: 40rpx;
          border: 1rpx solid #444;
          border-radius: 50%;
        }
      }

      .icon-weixin::before {
        border-color: #06c05f;
        color: #06c05f;
      }
    }
  }

  .tips {
    position: absolute;
    bottom: 80rpx;
    left: 20rpx;
    right: 20rpx;
    font-size: 22rpx;
    color: #999;
    text-align: center;

    .radio {
      transform: scale(0.6);
      margin-right: -4rpx;
      margin-top: -4rpx;
      vertical-align: middle;
    }

    .link {
      display: inline;
      color: #28bb9c;
    }
  }

  .phone {
    background-color: #28bb9c;
  }

  .wechat {
    background-color: #06c05f;
  }

  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80rpx;
    font-size: 28rpx;
    border-radius: 72rpx;
    color: #fff;
    .icon {
      font-size: 40rpx;
      margin-right: 6rpx;
    }
  }
}
</style>
